<template>
	<view class="content">
		<view class="top">
			
			<view class="user-info">
				<image src="../../static/images/cloud.png" mode="" class="cloud"></image>
				<view class="">
					<text class="name">朱大哥的猪场</text>
					<text class="date">2020-07-24</text>
				</view>
				<image src="../../static/images/three-circles.png" mode="" class="three-circles"></image>
			</view>
			
			<view class="environment">
				<view class="item">
					<text>26度</text>
					<text>室内温度</text>
				</view>
				<view class="item">
					<text>36度</text>
					<text>室外温度</text>
				</view>
				<view class="item">
					<text>56%</text>
					<text>湿度</text>
				</view>
			</view>
			
			<view class="btns">
				<button type="default" @tap="toManage()">猪舍管理</button>
				<button type="default" @tap="toExamine()">猪群检测</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'	
	export default {
		computed: {  
			...mapState(['count'])  
		}, 		
		data() {
			return {
				
			}
		},
		onShow() {
			uni.setTabBarBadge({
			  index: 2,
			  text: this.count.toString()
			});		
		},
		methods: {
			toExamine(){
				uni.reLaunch({
					url:'./examine/examine'
				})

			},
			toManage(){
				// uni.navigateTo({
				// 	url:"manage/environment-examine/environment-examine"
				// })
				uni.reLaunch({
					url: 'manage/environment-examine/environment-examine',
				});	
			}
		}
	}
</script>

<style scoped>
	.content{
		margin: 0;
		padding: 0;
		background:url(../../static/images/pig2.jpeg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	
	.top{
		display: flex;
		flex-direction: column;
		width: 100%;
		background: #FFFFFF;
		height: 140px;
		border-radius: 0px 0px 20px 20px;
	}
	
	.user-info{
		display: flex;
		flex-direction: row;
		margin-left: 15%;
	}
		
	.user-info view{
		display: flex;
		flex-direction: column;
		margin-left: 5%;
	}
	.cloud{
		width: 60px;
		height: 40px;
	}
	.three-circles{
		width: 50px;
		height: 50px;
		margin-left: 11%;
	}
	.name{
		font-size: 20px;
	}
	.date{
		color: #555;
	}
	
	.environment{
		margin-top: 5%;
		display: flex;
	}
	.item{
		display: flex;
		flex-direction: column;
		margin-left: 12%;
	}

	.item text:nth-child(1){
		font-size: 30px;
		color: #9b9c9c;
	}
	.item text:nth-child(2){
		color: #bfbfbf;
	}
	
	.btns{
		margin-top: 20%;
	}
	.btns button{
		width: 70%;
		height: 100px;
		font-size: 30px;
		padding-top: 3%;
		color: #FFFFFF;
		background:linear-gradient(to top, #1d6efb , #42beff);
		border-radius: 10px;
	}
	.btns button:nth-child(2){
		margin-top: 20%;
	}
</style>
